<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
                    <el-form-item label="受理单号" prop="no">
                        <el-input v-model="queryParams.no" placeholder="输入受理单号" clearable style="width: 240px"
                            maxlength="30" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="使用单位名称" prop="entName">
                        <el-input v-model="queryParams.entName" placeholder="使用单位名称" clearable style="width: 240px"
                            maxlength="11" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="保险状态" prop="status">
                        <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
                            <el-option label="待受理" value="1" />
                            <el-option label="待提交" value="2" />
                            <el-option label="已提交" value="3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报检类型" prop="checkkind">
                        <el-select v-model="queryParams.checkkind" placeholder="请选择" clearable style="width: 240px">
                            <el-option label="自行检测" value="1" />
                            <el-option label="委托检测" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 40px;">
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="detectionList"
                    style="margin-top: 30px;margin-left: 20px;margin-right: 20px;width: calc(100% - 40px);">
                    <el-table-column type="index" width="50" label="序号" />
                    <el-table-column label="受理单号" align="center" key="userNo" prop="userNo" width="150px" />
                    <el-table-column label="检测状态" align="center" key="status" prop="status" width="120px" />
                    <el-table-column label="使用单位名称" align="center" key="userName" prop="userName" width="150px" />
                    <el-table-column label="所属区域" align="center" key="area" prop="area" width="150px" />
                    <el-table-column label="单位地址" align="center" key="address" prop="address" width="120px" />
                    <el-table-column label="联系人" align="center" key="nickName" prop="nickName"></el-table-column>
                    <el-table-column label="联系电话" align="center" prop="phone" width="110" />
                    <el-table-column label="报检类型" align="center" prop="type" width="160" />
                    <el-table-column label="设备类别" align="center" prop="kind" width="160" />
                    <el-table-column label="操作" fixed="right" align="center" width="150"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button v-if="scope.row.status == '待审核' || scope.row.status == '待效核'" link type="primary"
                                @click="opDialog(scope.row, 1, scope.$index)">通过</el-button>
                            <el-button v-if="scope.row.status == '待审核' || scope.row.status == '待效核'" link type="primary"
                                @click="opDialog(scope.row, 2, scope.$index)">驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                    @pagination="getList" style="margin-right: 20px;" />
            </el-col>
        </el-row>

        <!-- 驳回 -->
        <el-dialog v-model="rejectPop" width="500px" append-to-body title="驳回">
            <el-form :model="rejectPopForm" :rules="rules" ref="userRef" style="padding-left: 30px;">
                <el-form-item label="驳回说明" prop="txt">
                    <el-input v-model="rejectPopForm.txt" autosize type="textarea" placeholder="请输入" style="width: 310px"
                        maxlength="200" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="sureReject">确认驳回</el-button>
                    <el-button @click="rejectPop = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
 
<script setup name="User">

const { proxy } = getCurrentInstance();

const detectionList = ref([]);
const loading = ref(false);
const open = ref(false);
const openDevicePop = ref(false);
const total = ref(0);
const multipleSelection = ref([])
const multipleTableRef = ref(null)

const devicePopForm = ref({
    no: '',
    deviceList: [{
        no: 'A45821320230125',
        registerNo: '124587546222',
        outNo: '6524531284591',
        deptNo: '12252142',
        kind: '载货电梯',
        area: '贵州省贵阳市观山湖区',
        time: '2023-10-15 13:25:55',
    }]
})
const rejectPop = ref(false)
const rejectPopForm = ref({
    txt: ''
})

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        entName: undefined,
        kin: undefined,
        phonenumber: undefined,
        dateRange: []
    },
    rules: {
        nickName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        checkCompony: [{ required: true, message: "请选择检测机构", trigger: "blur" }],
        kind: [{ required: true, message: "请选择设备类型", trigger: "change" }],
        checkType: [{ required: true, message: "请选择报检类型", trigger: "blur" }],
        entName: [{ required: true, message: "使用单位不能为空", trigger: "blur" }],
        phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的联系电话", trigger: "blur" }],
    }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询列表 */
const getList = () => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
        detectionList.value = [{
            userNo: '2023154245221502',
            userName: '贵州检联特种设备检验检测有限公司',
            nickName: '贵州检联',
            dept: '维保',
            phone: '187****2243',
            status: '待审核',
            area: "贵州省贵阳市观山湖",
            address: '阳关大道',
            time: '2023-01-01 12:25:33',
            type: "委托检测",
            kind: "电梯",
        }, {
            userNo: '2023154245221502',
            userName: '贵州检联特种设备检验检测有限公司',
            nickName: '贵州检联',
            dept: '维保',
            phone: '187****2243',
            status: '待效核',
            area: "贵州省贵阳市观山湖",
            address: '阳关大道',
            time: '2023-11-01 18:25:12',
            type: "委托检测",
            kind: "电梯",
        }, {
            userNo: '2023154245221502',
            userName: '贵州检联特种设备检验检测有限公司',
            nickName: '贵州检联',
            dept: '维保',
            phone: '187****2243',
            status: '未开始',
            area: "贵州省贵阳市观山湖",
            address: '阳关大道',
            time: '2023-11-01 18:25:12',
            type: "委托检测",
            kind: "电梯",
        }, {
            userNo: '2023154245221502',
            userName: '贵州检联特种设备检验检测有限公司',
            nickName: '贵州检联',
            dept: '维保',
            phone: '187****2243',
            status: '进行中',
            area: "贵州省贵阳市观山湖",
            address: '阳关大道',
            time: '2023-05-11 10:15:42',
            type: "委托检测",
            kind: "电梯",
        }];
        total.value = 5;
    }, 1000);
    // listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    //     loading.value = false;
    //     detectionList.value = res.rows;
    //     total.value = res.total;
    // });
};

getList();

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
};

/** 删除按钮操作 */
function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除该数据项？').then(function () {

    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
};

/** 重置操作表单 */
function reset() {
    form.value = {
        userName: undefined,
        entName: undefined,
        kin: undefined,
        phonenumber: undefined,
        dateRange: []
    };
    proxy.resetForm("userRef");
};


const rejectIdx = ref(-1)

const sureReject = () => {
    proxy.$modal.msgSuccess("操作成功");
    detectionList.value[rejectIdx.value].status = '已驳回'
    rejectPop.value = false;
}

//通过或驳回
const opDialog = (row, type, idx) => {
    if (type == 2) {
        rejectIdx.value = idx
        rejectPop.value = true;
        return
    }
    proxy.$modal.confirm('是否确认 "通过" 该检测任务？').then(function () {

    }).then(() => {
        detectionList.value[idx].status = '审核通过'
        proxy.$modal.msgSuccess("操作成功");
    }).catch(() => { });
}

</script>
 

<style lang="scss" scoped>
.dialog-item-title {
    color: #000;
    font-size: 17px;
    padding-left: 10px;
    margin: 0 20px;
    border-left: 4px #00BFFF solid;
}

.now-select-txt {
    font-size: 15px;
    color: #fff;
    background: #00BFFF;
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;

    span {
        font-size: 20px;
        font-weight: bold;
        margin: 0 10px;
    }

    div {
        cursor: pointer;
        margin-left: 30px;
        font-weight: bold;
    }
}
</style>